import React, {
  createRef
} from "react";
import {
  Space,
  Row,
  Table,
  Pagination,
  Typography,
  Button,
  Checkbox,
  Form,
  message,
  Input
} from "antd";
import "./index.less";
import { listOrder, createOrder } from "@/services/order";
import moment from "moment";

// 登录的路由组件
class Order extends React.Component {
   // 表格规则定义
   columns = [
     {
       title: "订单编号",
       dataIndex: "ordId",
       render: () => <p>***</p>,
     },
     {
       title: "客户名称",
       dataIndex: "ordName",
     },
     {
       title: "订单金额",
       dataIndex: "ordMoney",
       render: (value) => `￥${value}.00`,
     },
     {
       title: "创建时间",
       dataIndex: "ordTime",
       render: (value) => moment.unix(value).format("YYYY-MM-DD HH:MM:SS"),
     },
     {
       title: "结束订单",
       dataIndex: "ordState",
       render: (value, record) => (
         <Checkbox
           defaultChecked={value}
           onClick={() => {
             this.ordState(record)
           }}
         />
       ),
     },
     {
       title: "订单状态",
       dataIndex: "ordState",
       render: (value) => {
         if (value) {
           return <span style={{ color: "#22A800" }}>进行中</span>;
         }
         return <span style={{ color: "#D9001B" }}>已结束</span>;
       },
     },
     {
       title: "操作",
       dataIndex: "make",
       render: () => (
         <Space size="middle">
           <a>查看详情</a>
         </Space>
       ),
     },
   ];

   constructor(props) {
     super(props);

     this.state = {
       total: 0,
       currentPage: 1,
       size: 10,
       dataSource: [],
       query: 0,
     };
     this.searchFormRef = createRef();
     this.tableWrapperRef = createRef();
     this.otherHeight = 0;
   }

   // 加载table
   componentDidMount() {
     this.fetchTableData()
   }

   ordState=(a) => {
     createOrder({
       id: a.id,
       ordState: !a.ordState,
     }).then((Res) => {
       if (Res.data.ret === 0) {
         this.fetchTableData();
         // 更新成功
         message.success("更新成功！");
       } else {
         // 更新失败
         message.error("更新失败");
       }
     })
   }

  // 页码改变时
  handlePageChange = (page, size) => {
    this.setState({ currentPage: page, size }, this.fetchTableData);
  };

  // 重置对应输入框
  resetFliter = () => {
    const { resetFields } = this.searchFormRef.current;
    resetFields();
  };

  // 查询对应函数
  search = () => {
    this.fetchTableData();
  };

  // 获取输入框信息
  getSearchFormValue = () => {
    const { getFieldsValue } = this.searchFormRef.current;
    const { ordName } = getFieldsValue();
    return { ordName };
  };

  // 刷新数据
  fetchTableData = async () => {
    const { size, currentPage } = this.state;
    const { account, relation } = this.getSearchFormValue();

    const {
      data: { ret },
      data: {
        data: { list, total, query },
      },
    } = await listOrder({
      size,
      page: currentPage,
      account,
      relation,
    });

    if (ret !== 0) {
      return;
    }
    this.setState({ total, dataSource: list, query });
  };

  render() {
    const {
      total, dataSource, currentPage, size, query
    } = this.state;
    return (
      <div className="Adminer">
        <div className="AdminerSearch">
          <div className="AdminerTitle">
            <h2>
              订单管理
              <div className="blank" />
            </h2>
          </div>
          <Form ref={this.searchFormRef}>
            <Form.Item label="订单名称：" name="ordName" className="account">
              <Input placeholder="请输入" />
            </Form.Item>
            <Form.Item className="return">
              <Button type="ghost" onClick={() => this.resetFliter()}>
                重置
              </Button>
            </Form.Item>
            <Form.Item className="search">
              <Button type="primary" onClick={() => this.search()}>
                查询
              </Button>
            </Form.Item>
          </Form>
        </div>

        <div className="AdminerList">
          <p>订单列表</p>
          <Table
            rowSelection={this.rowSelection}
            pagination={false}
            // loading={!isReady}
            columns={this.columns}
            dataSource={dataSource}
          />
          <Row justify="space-between" align="middle">
            <Typography.Text>
              共
              {query}
              条记录 第
              {currentPage}
              /
              {' '}
              {Math.ceil(query / size) || 1}
              页
            </Typography.Text>

            <Pagination
              showQuickJumper
              showLessItems
              total={total}
              pageSize={10}
              current={currentPage}
              showSizeChanger={false}
              onChange={this.handlePageChange}
            />
          </Row>
        </div>
      </div>
    );
  }
}
export default Order;
